<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:63:"E:\WWW\movie.cc\public/../application/admin\view\col\index.html";i:1682299720;}*/ ?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
  </head>
  <body class="pear-container">
    <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">

                <div class="layui-form-item">

                  <style type="text/css">
                    .layui-form-item .layui-inline {
                        margin-bottom: 5px;
                        margin-right: 0px;
                    }
                  </style>

                    <label class="layui-form-label">筛选条件:</label>
                    <div class="layui-inline" style="width: 200px;">
                      <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入栏目名称" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-inline">
                      <div class="layui-input-inline">
                        <input type="text" name="time" id="date" placeholder="选择创建时间段" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                 
                  <div class="layui-inline">

                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="search">

                      <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>

                    </button>

                    

                  </div>

                </div>

              </div>
      <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
      </div>
    </div>

    <script type="text/html" id="toolbar">
      <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
    </script>
    <script type="text/html" id="switchTpl">
      <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="sexDemo" {{ d.status == 1 ? "checked" : "" }}>
    </script>
    <script type="text/html" id="options">
      <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
            <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    </script>

    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script>
      layui.use(['table', 'form', 'jquery','common','laydate'], function() {
        let table = layui.table;
                let form = layui.form;
        let laydate = layui.laydate;
        let $ = layui.jquery;
        let common = layui.common;
                 laydate.render({ 
                  elem: '#date',
                  type:'date'
                  ,range: '~' //或 range: '~' 来自定义分割字符
                });
        let MODULE_PATH = "/admin/col/";

        let cols = [
          [  
              {type:'checkbox'},
              {
                  field: 'id',
                  title: 'ID', 
                  sort: true, 
                  unresize: true,
                  align: 'center',
                  width:80
              },{
                  field: 'name',
                  title: '栏目名称', 
                  sort: true, 
                  unresize: true,
                  align: 'center',
                  templet:function(d){
                      return d.name
                  }
              },{
                  field: 'icon1',
                  title: '选中图标',
                  unresize: true,
                  align: 'center',
                  templet:function(d){
                      if(d.icon1){
                          var str=`<a href="${d.icon1}" target="_blank"><img class="photo" style="height:30px;margin-left:2px" src="${d.icon1}"></i></a>`
                          return str;
                      }else{
                          return '';
                      }
                  }
              },{
                  field: 'icon2',
                  title: '未选中图标',
                  unresize: true,
                  align: 'center',
                  templet:function(d){
                      if(d.icon2){
                          var str=`<a href="${d.icon2}" target="_blank"><img class="photo" style="height:30px;margin-left:2px" src="${d.icon2}"></i></a>`
                          return str;
                      }else{
                          return '';
                      }
                  }
              },{
                  field: 'sort',
                  title: '排序', 
                  sort: true, 
                  unresize: true,
                  align: 'center',
                  templet:function(d){
                      return d.sort
                  }
              },{
                  field:'status',
                  title:'状态',
                  templet: '#switchTpl',
                  unresize: true,
                  width:100
              },{
                  field: 'create_time',
                  title: '创建时间',
                  unresize: true,
                  align: 'center',
                  width:170
              },{
                  title: '操作',
                  toolbar: '#options',
                  unresize: true,
                  align: 'center',
                  width: 180
              }
          ]
        ]
        //监听状态操作
        form.on('switch(sexDemo)', function(obj){
          var id=this.value;
          $.ajax({
               type: "POST",
               url: MODULE_PATH + 'up_status?id='+id,
               data:"",
               success: function(msg){
                console.log(msg)
                if(msg==1){
                 layer.msg("隐藏成功", {
                      offset: '15px'
                      ,icon: 1
                      ,time: 1000
                    });
                }else if(msg==2){
                  layer.msg("隐藏失败", {
                      offset: '15px'
                      ,icon: 2
                      ,time: 1000
                    });
                }else if(msg==3){
                  layer.msg("启用成功", {
                      offset: '15px'
                      ,icon: 1
                      ,time: 1000
                    });
                }else{
                  layer.msg("启用失败", {
                      offset: '15px'
                      ,icon: 2
                      ,time: 1000
                    });
                }
               }
            });
          // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });
        table.render({
          elem: '#dataTable',
          url: MODULE_PATH + 'lst',
          page: true,
          cols: cols,
                    cellMinWidth: 100,
          skin: 'line',
                    type:'post',
          toolbar: '#toolbar',
                    method: 'post'
          ,defaultToolbar: [{
            title: '刷新',
            layEvent: 'refresh',
            icon: 'layui-icon-refresh',
          }, 'filter', 'print', 'exports']
        });
                var where={name:"",type:"",time:"",arr:''};
                form.on('submit(search)', function(data){

                    where = data.field;

                    console.log(where);

                    //执行重载

                    table.reload('dataTable', {

                      where: where
                    });

                });
        table.on('tool(dataTable)', function(obj) {
          if (obj.event === 'remove') {
            window.remove(obj);
          } else if (obj.event === 'edit') {
            window.edit(obj);
          } else if (obj.event === 'permission') {
                        window.permission(obj);
                    }
        });

        table.on('toolbar(dataTable)', function(obj) {
          if (obj.event === 'add') {
            window.add();
          } else if (obj.event === 'refresh') {
            window.refresh();
          }
        });

                 //弹出窗设置 自己设置弹出百分比
                function screen() {
                    if (typeof width !== 'number' || width === 0) {
                    width = $(window).width() * 0.8;
                    }
                    if (typeof height !== 'number' || height === 0) {
                    height = $(window).height() - 20;
                    }
                    return [width + 'px', height + 'px'];
                }

        window.add = function() {
          layer.open({
                        type: 2,
                        maxmin: true,
                        title: '新增数据',
                        shade: 0.1,
                        area: ['60%','90%'],
            content: MODULE_PATH + 'add'
          });
        }

        window.edit = function(obj) {
          layer.open({
                        type: 2,
                        maxmin: true,
                        title: '修改数据',
                        shade: 0.1,
                        area: ['60%','90%'],
            content: MODULE_PATH + 'edit/id/'+obj.data['id']
          });
        }

               

        window.remove = function(obj) {
                    layer.confirm('确定要删除该数据', {
                        icon: 3,
                        title: '提示'
                    }, function(index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url:MODULE_PATH + 'remove',
                            data:{id:obj.data['id']},
                            dataType: 'json',
                            type: 'POST',
                            success: function(res) {
                                layer.close(loading);
                                if (res.code==1) {
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        obj.del();
                                        table.reload('dataTable');
                                    });
                                } else {
                                    layer.msg(res.msg, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    });
                }

        window.refresh = function(param) {
          table.reload('dataTable');
        }
      })
    </script>
  </body>
</html>
